<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>Layout Container</title>

        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/style.css')}}"/>
        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/Layout/css/layout-default-latest.css')}}"/>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
        <link type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/jquery-ui-1.8.21.custom.css')}}" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/bootstrap/css/bootstrap.min.css')}}"/>
        <link rel="stylesheet" type="text/css" href="{{asset('widget/wrap-bootstrap.css')}}"/>
        <link rel="stylesheet" type="text/css" href="{{asset('js/jquery-infinite-carousel/jquery.infinite-carousel.css')}}"></link>

        <SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/jquery-ui-1.8.19/js/jquery-ui.js')}}"></SCRIPT>
        <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/Layout/js/jquery.layout-latest.js')}}"></SCRIPT>
        <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/bootstrap.js')}}"></script>
        <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/application.js')}}"></script>
        
        <script src="{{asset('js/jquery-infinite-carousel/jquery.infinite-carousel.js')}}"></script>

        <!-- main layout Style -->
        <link rel="stylesheet" type="text/css" href="{{asset('mainlayout/css/layout.css')}}"/>

        {#Plugin jquery du monitor#}
        <script src="{{asset('js/monitor-plugin.js')}}"></script>
        <script src="{{asset('widget/widget-plugin.js')}}"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#viewport').carousel('#simplePrevious', '#simpleNext');
                $('#slider-stage').carousel('#previous', '#next');  
            });
            
                var nb_widget_total;
                
                $(function() {
               /*****************************
		*     WIDGET MANAGEMENT      *
		******************************/
		//WIDGET: ONTOP sur click
		$(".widget").on("mousedown", function() {
                        nb_widget_total = $(".widget").size();
			var what_zindex = parseInt($(this).css("z-index"));
			var widget_to_modify = $(this);
			$(".widget").each(function () {
				if ( parseInt($(this).css("z-index")) > what_zindex) {
				  $(this).css("z-index","-=1");
				}
			});
			widget_to_modify.css("z-index",nb_widget_total);
			/*alert(what_zindex);*/
		});
                
		//WIDGET: DRAGGABLE
		$( ".widget" ).draggable({cursor: "move",handle: ".widget-header" ,snap: ".widget", snapMode: "outer", snapTolerance: "10"});
		//$( ".title_to_drag" ).draggable({helper: "clone",cursor: "move"});
		$( ".widget-header i.icon-move" ).draggable({helper: function( event ) {
				return $( "<div class='ui-widget-header widget-header' style='z-index:100'>I'm a custom helper</div>" );
			}
		,cursor: "move"});
		
		//WIDGET: REZISABLE
                
                $(".widget").resizable({
                        maxHeight: 700,
                        maxWidth: 700,
                        minHeight: 100,
                        minWidth: 200
                });
            });
            
          </script>

        {#Script de test#}
          <script type="text/javascript" src="{{asset('loading/lightbox-fade.js')}}"></script>
          <link rel="stylesheet" href="{{asset('loading/lightbox-image.css')}}" type="text/css" media="all" />
          
          <script type="text/javascript">
            $(document).ready(function(){
                //désactive le click sur la fenetre de chargement
                $("#loading").unbind("click");
                //fin de chargement du login
                //$("#check-login-load").append("<img src='/GWIT_Plateform_Trading/web/loading/image/valide2.png'/>");
                //$(".widget_zone").widget_add();
            });
          </script>

                <!-- Initialisation du GUI -->
            <script type="text/javascript" src="{{asset('js/Init_layout.js')}}"></script>
            </head>
            <body>
{#Div de test de la fenetre de chargement#}
                    <div id="loading">
                        <div id="shadowing-loader"></div>
                        <div id="box-loader" class="modal hide">
                            <div id="boxcontent-loader" onclick="closebox()">
                                <div style="float:left; width: 40%;">
                                    <img style="margin-top:45%;margin-left:20%;" src='{{asset('loading/image/loading5.gif')}}'/>
                                </div>
                                <div style="float:left;margin-top:10%;">
                                    <table>
                                        <tr style="height:70px;">
                                            <td id="check-login-load" style="width:30px;"></td><td>LOGIN</td>
                                        </tr>
                                        <tr style="height:70px;">
                                            <td id="check-appli-load" style="width:30px;"></td><td>CHARGEMENT APPLICATION</td>
                                        </tr>
                                        <tr style="height:70px;">
                                            <td id="check-perso-load" style="width:30px;"></td><td>CHARGEMENT DE DONNEE PERSONNEL</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <div id="boxtitle">Chargement en cour</div>
                        </div>
                    </div>

                {#LightBox de creation d'un nouveau moniteur#}
                    <div id="lightbox-newmonitor">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Create monitor</h3>
                            </div>
                            <div class="modal-body" id="boxcontent">
                                <label>Name :</label><input id="new-monitor-name" onclick="$(this).val('')" type="text" value="New Desktop" MAXLENGTH="15"/>
                                <label>Commentaire :</label><textarea id="new-monitor-cmt" rows="2" cols="20" ></textarea>
                            </div>
                            <div class="modal-footer" id="btn-create-desktop">
                                <a href="#" class="btn btn-primary">Create</a>
                            </div>
                        </div>
                    </div>
                    
                {#LightBox update d'un moniteur TODO: Faire marcher le bouton quitter#}
                    <div id="lightbox-update-monitor">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide">
                            <div class="modal-header">
                                <button href="#" onclick="javascript:$('#lightbox-update-monitor div#shadowing').hide();
                                                                 $('#lightbox-update-monitor div#box').hide();" class="close">&times;</button>
                                        <h3>Update monitor</h3>
                                </div>
                                <div class="modal-body" id="boxcontent">
                                    <label>Name :</label><input id="update-monitor-name" onclick="$(this).val('')" type="text" value="New name" MAXLENGTH="15"/>
                                    <label>Commentaire :</label><textarea id="update-monitor-cmt" rows="2" cols="20"></textarea>
                                </div>
                                <div class="modal-footer" id="btn-update-desktop">
                                    <a href="#" class="btn btn-primary">Save changes</a>
                                </div>
                            </div>
                        </div>
                    
                    {#LightBox ajouter widget TODO: Faire marcher le bouton quitter#}
                    <div id="lightbox-add-widget">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide">
                            <div class="modal-header">
                                <button href="#" onclick="javascript:$('#lightbox-add-widget div#shadowing').hide();
                                                                 $('#lightbox-add-widget div#box').hide();" class="close">&times;</button>
                                <h3>Create widget</h3>
                                
                            </div>
                            <div class="modal-body" id="boxcontent">
                                <label>Name :</label><input id="add-widget-name" onclick="$(this).val('')" type="text" value="New Widget" MAXLENGTH="15"/>
                            </div>
                                <div class="modal-footer" id="btn-add-widget">
                                    <a href="#" class="btn btn-primary">create</a>
                                </div>
                            </div>
                     </div>

                        {#modalBox : confirmation de destruction#}
                        <div id="modal-from-dom" class="modal hide fade">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Delete URL</h3>
                            </div>
                            <div class="modal-body">
                                <p>Vous êtes sur le point d'effacer un bureau, cette procédure est irréversible.</p>
                                <p>Voulez vous continuer ?</p>
                            </div>
                            <div class="modal-footer">
                                <a id="delete-desktop" href="#" class="btn danger">Yes</a>
                                <a href="#" onclick="javascript:$('#modal-from-dom').modal('hide')" class="btn secondary">No</a>
                            </div>
                        </div>
                    
                    {#modalBox : confirmation de destruction#}
                        <div id="modal-from-widget" class="modal hide fade">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Delete widget</h3>
                            </div>
                            <div class="modal-body">
                                <p>Vous êtes sur le point d'effacer un widget, cette procédure est irréversible.</p>
                                <p>Voulez vous continuer ?</p>
                            </div>
                            <div class="modal-footer">
                                <a id="delete-widget" href="#" class="btn danger">Yes</a>
                                <a href="#" onclick="javascript:$('#modal-from-dom').modal('hide')" class="btn secondary">No</a>
                            </div>
                        </div>

                        <!-- HEADER APPLICATION -->
                        <div id="header" class="pane ui-layout-north" style="overflow:none;" >
                            <div id="logo">
                            </div>

                            <div id="main_menu" style="width: 88%;">
                            {# Check box choix du moniteur #}
                                    
                                    <div class="subnav menu-top-button" style="position:relative;float:left">

                                        <ul class="nav nav-pills">
                                            <li class="desktop_setting">
                                                <a id="profile" href="#javascript" data-toggle="dropdown"><i class="icon icon-cog "></i>
                                                    <span style="height: 30px;text-align: center;">
                                                        Monitors &nbsp &nbsp
                                                        </span>&nbsp;
                                                    <span class="caret" style="margin-top:7px;"></span>
                                                        <ul id="monitor_menu" class="dropdown-menu">
                                                            <div id="desktop-grpe">
                                                                <li><a href="#monitor_1" class="button-desktop-activate" m-id="999">Monitor</a></li>
                                                            </div>
                                                            <li class="divider"></li>
                                                            <li class="new-monitor"><a href="#"><i class="icon-plus"></i> New</a></li>
                                                        </ul>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    
                                    <div style="margin-left: 5px;float:left;margin-top:-20px;">
                                         <ul id="desktop-nav" class="nav nav-pills" style="float:left">
                                            <li class="button_navi_desktop"><a id="simplePrevious" class="back"><i style="margin-top:60%;" class="icon icon-chevron-left"></i></a></li>
                                        </ul>
                                        <div id="viewport" style="float:left;">
                                            <ul id="desktop-carousel" class="nav nav-pills">
                                                    <li class="desktop"><a href="#modals" style="color:#FFFFFF">1</a></li>
                                            </ul>
                                        </div>
                                        <ul id="desktop-nav" class="nav nav-pills" style="float:left">
                                            <li class="button_navi_desktop"><a id="simpleNext" class="forward"><i style="margin-top:60%;" class="icon icon-chevron-right"></i></a></li>
                                        </ul>
                                        <!-- Button new -->
                                        <ul id="create-desktop" class="nav nav-pills" style="float:left;">
                                                <li><a href="#"><i class="icon icon-plus"></i> New</a></li>
                                        </ul>
                                    </div>
                                    <!--
                                        <a id="simplePrevious">Previous</a>
                                        <a id="simpleNext">Next</a>
                                        -->
                                    
                                    <div class="subnav pull-right menu-top-button">
                                        <ul class="nav nav-pills">
                                            <li class="desktop_setting">
                                                <a id="profile" href="#javascript" data-toggle="dropdown"><i class="icon icon-user "></i>
                                                    <span style="height: 30px;text-align: center;">
                                                        {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                                                            {{ app.user.username }}
                                                        {% else %}
                                                            <a href="{{ path('fos_user_security_login') }}">Connexion</a>
                                                        {% endif %}
                                                        </span>
                                                    <span class="caret" style="margin-top:7px;"></span>
                                                        <ul class="dropdown-menu">
                                                            <li><a href="#">Profile</a></li>
                                                            <li><a href="#">Settings</a></li>
                                                            <li><a class="cookie-delete" href="#">Delete Cookies</a></li>
                                                            <li class="divider"></li>
                                                            <li><a href={{path('fos_user_security_login')}}><i class="icon icon-off"></i> Logout</a></li>
                                                        </ul>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    
                                    
                                    </div>
                                </div>

                                <div id="center" class="pane-main ui-layout-center">
                                    <div class="container_page" id="monitor_1" m-id="999">
                                        <!-- WIDGET ZONE -->
                                        <div class="pane ui-layout-center" style="padding:2px;">
                                            <div class="widget_zone" style="width:100%;height:100%;">
                                                <!--
                                                <div id="widget1" class="widget modal box" style="position: absolute;  top:150px;left:1030px;z-index: 1; height:500px;width: 500px;margin:0;overflow:hidden">
                                                        <div class="widget-header modal-header box-header" style="border-bottom:1px solid #ddd;">
                                                                <h4 class="">
                                                                <span style="background:#fff">Charts - Bar</span>
                                                                <i class="icon-signal" style="float:left;margin:1px 5px 0px 0px;"></i>
                                                                <a class="box-btn" title="close"><i class="icon-trash"></i></a>
                                                                <a class="box-btn" title="toggle"><i class="icon-minus"></i></a>     
                                                                <a class="box-btn" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-cog"></i></a>

                                                                <a class="box-btn" style="margin-right:10px;" title="config" data-toggle="modal" href="#box-config-modal"><i class="icon-move"></i></a>

                                                            </h4>
                                                        </div>
                                                        <div id="widget1_body" class="modal-body">

                                                                <div id="widget1_container" style="width: 400px; height: 400px; margin: 0 auto; overflow:auto"></div>
                                                        </div>
                                                        </div>
                                                -->
                                            </div>
                                        </div><!-- WIDGET ZONE -->

                                        <div class="pane ui-layout-west" style="background-color:#F5F5F5;">
                                            <div class="menu_left">
                                                <ul class="nav nav-list">
                                                    <li class="nav-header">Add Widgets</li>
                                                    <li class="active"><a href="#"><i class="icon-white icon-home"></i> Odds comparator</a></li>
                                                    <li><a href="#"><i class="icon-book"></i> Betslip</a></li>
                                                    <li><a href="#"><i class="icon-pencil"></i> Surebets</a></li>
                                                    <li><a href="#"><i class="icon-pencil"></i> Middles</a></li>
                                                    <li><a href="#"><i class="icon-pencil"></i> Negative Middles</a></li>
                                                    <li class="nav-header">Negative Middles</li>
                                                    <li><a href="#"><i class="icon-user"></i> Profile</a></li>
                                                    <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#"><i class="icon-flag"></i> Help</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- FIN TAB CONTENT -->

                                    <div class="pane ui-layout-west" style="background-color:#F5F5F5;">
                                        <div class="menu_left">
                                            <ul class="nav nav-list">
                                                <li class="nav-header">Add Widgets</li>
                                                <li class="active"><a href="#"><i class="icon-white icon-home"></i> Odds comparator</a></li>
                                                <li><a href="#"><i class="icon-book"></i> Betslip</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Surebets</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Middles</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Negative Middles</a></li>
                                                <li class="nav-header">Negative Middles</li>
                                                <li><a href="#"><i class="icon-user"></i> Profile</a></li>
                                                <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#"><i class="icon-flag"></i> Help</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- FIN TAB CONTENT -->
                                <!-- FOOTER APPLICATION -->
                                <div id="footer" class="pane ui-layout-south" style="overflow:none; height: 50px; margin-bottom: 0px;overflow : visible;">
                                    {# Check box choix du widget #}
                                    <div class="subnav menu-bottom-button" style="position:relative;float:left; height: 100%; z-index:3;">

                                        <ul class="nav nav-pills">
                                            <li class="desktop_setting">
                                                <a id="profile" href="#javascript" data-toggle="dropdown"><i class="icon icon-cog"></i>
                                                    <span style="height: 30px;text-align: center;margin-right: 0;">
                                                        Widget &nbsp &nbsp
                                                        </span>
                                                    <span class="caret" style="margin-top:7px;"></span>
                                                        <ul id="widget_menu" class="dropdown-menu dropup-menu" style="z-index:1000;">
                                                            <li class="new-widget"><a href="#"><i class="icon-plus"></i> New</a></li>
                                                            <li class=  "divider"></li>
                                                            <div id="widget-grpe">
                                                                <li><a href="#widget_1" class="button-desktop-activate" m-id="999">Test Download</a></li>
                                                            </div>
                                                        </ul>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <script type="text/javascript" src="{{asset('js/window.js')}}"></script>
                            </body>
                        </html>